<template>
    <el-drawer v-model="visible" :with-header="false" :size="1000" append-to-body @closed="$emit('closed')">
        <el-container v-loading="loading">
            <el-main>
                <sc-title title="答题情况查看"></sc-title>
                <div>
                    <div class="title">1、答题卡</div>
                    <div class="cardbox">
                        <template v-for="(item,index) in questions" :key="index">
                            <div class="item" :class="{right: resAnswerRight(item.userAnswer), wrong: !resAnswerRight(item.userAnswer)}">{{index + 1}}</div>
                        </template>
                    </div>

                    <div class="cardbox">
                        <div class="tip-item" style="background:#19C14B;color:#fff">正确</div>
                        <div class="tip-item" style="background:#ef5350;color:#fff">错误</div>
                    </div>

                    <div class="cardbox" style="font-size: 16px;">
                        <span>正确率: {{ examLog.rightRate }}%</span>
                        <span style="margin-left:10px;">答题时间: {{ examLog.submitTime }}</span>
                    </div>
                </div>
                <div>
                    <div class="title">2、答题详情</div>
                    <template v-for="(item, index) in questions" :key="index">
                        <div class="question-item">
                            <scQusetionDetail :question="item" :itemIndex="index" :markMode="true"></scQusetionDetail>
                        </div>
                    </template>
                </div>
            </el-main>
            <el-footer>
                <el-button @click="visible = false">关闭</el-button>
            </el-footer>
        </el-container>

    </el-drawer>
</template>

<script>
import { in_array } from '@/utils/index.js'
export default {
    emits: ["success", "closed"],
    components: {
    },
    data() {
        return {
            in_array,
            loading: false,
            visible: false,
            examLog: {},
            questions: [],
        };
    },
    mounted() {},
    methods: {
        //显示
        open() {
            this.visible = true;
            return this;
        },
        //表单注入数据
        async setData(row) {
            if (row) {
                this.loading = true
                await this.$API.articleExercise.log.action.get({ id: row.id }).then(res => {
                    this.examLog = res.data;

                    let userAnswer = {}
					res.data.answer.forEach(item => {
                        userAnswer[item.id] = {
                            status: item.mark.isRight,
                            data: item.answer
                        }
                    });

                    let questionItems = []
                    res.data.questions.forEach(item => {
                        let row = {
                            id: item.id,
                            type: {value: item.type.value, name: item.type.name},
                            stem: item.stem,
                            option: item.option,
                            userAnswer: userAnswer[item.id] ? userAnswer[item.id] : null,
                            rightAnswer: item.rightAnswer,
                            analysis: item.analysis,
                            answer: ''
                        }
                        row.answer = row.userAnswer ? row.userAnswer.data : []
                        questionItems.push(row)
                    })
                    this.questions = questionItems
                    this.loading = false
                }, () => {
                    this.loading = false
                })
            }
        },
        resAnswerRight(answer) {
            return answer && answer.status == 1
        }
    },
};
</script>

<style lang="scss" scoped>

.right {
    background-color: #19C14B;
}

.wrong {
    background-color: #ef5350;
}

.el-image__inner {
    object-fit: cover;
}

.panel-search-box {
    padding-left: 0px;
}

.panel-search>*:first-child {
    margin-left: 0px;
}

.cardbox {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 0 15px;
    width: calc(100% + 10px);
    .item {
        width: 30px;
        height: 30px;
        border: 1px solid #e6e6e6;
        border-radius: 20%;
        margin: 0 10px 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        cursor: pointer;
        color: #fff;
    }
    .tip-item {
        height: 28px;
        line-height: 25px;
        padding: 1px 18px;
        border-radius: 6px;
        margin-right: 10px;
    }
    .tip-item-span {
        line-height: 24px;
        margin-left: 4px;
        margin-right: 10px;
    }
}
.title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 0;
    font-size: 15px;
}
.score-0-css {
    background-color: #ee3333;
}
.score-1-css {
    background-color: #c946ff;
}
.score-2-css {
    background-color: #3464ff;
}
.score-3-css {
    background-color: #38e19f;
}
.score-4-css {
    background-color: #10bf2d;
}
.question-item {
    margin-left: 20px;
    margin-top: 10px;
}
</style>
